---
import ThemeToggle from "./ThemeToggle.astro";

const url = new URL(Astro.request.url);
---

<script>
	import { toggleClass } from "@/util";

	document.addEventListener("DOMContentLoaded", () => {
		const { body } = document;
		const toggleMenuButton = document.getElementById("toggle-navigation-menu");
		let menuOpen = false;

		toggleMenuButton.addEventListener("click", () => {
			toggleClass(body, "menu-open");
			toggleClass(toggleMenuButton, "text-accent");
			menuOpen = !menuOpen;
			toggleMenuButton.setAttribute("aria-expanded", menuOpen.toString());
		});
	});
</script>

<header>
	<span>
		<a
			href="/"
			class="logo"
			aria-current={url.pathname === "/" ? "page" : false}
		>
			<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 480">
				<title>Logo</title>
				<path
					d="M181.334 93.333v-40L226.667 80v40l-45.333-26.667ZM136.001 53.333 90.667 26.667v426.666L136.001 480V53.333Z"
					fill="#B04304"></path>
				<path
					d="m136.001 119.944 45.333-26.667 45.333 26.667-45.333 26.667-45.333-26.667ZM90.667 26.667 136.001 0l45.333 26.667-45.333 26.666-45.334-26.666ZM181.334 53.277l45.333-26.666L272 53.277l-45.333 26.667-45.333-26.667ZM0 213.277l45.333-26.667 45.334 26.667-45.334 26.667L0 213.277ZM136 239.944l-45.333-26.667v53.333L136 239.944Z"
					fill="#FF5D01"></path>
				<path
					d="m136 53.333 45.333-26.666v120L226.667 120V80L272 53.333V160l-90.667 53.333v240L136 480V306.667L45.334 360V240l45.333-26.667v53.334L136 240V53.333Z"
					fill="#53C68C"></path>
				<path d="M45.334 240 0 213.334v120L45.334 360V240Z" fill="#B04304"
				></path>
			</svg>
			<span>Meditation</span>
		</a>
		<nav id="navigation-menu" aria-label="Main">
			<a href="/" aria-current={url.pathname === "/" ? "page" : false}>主页</a>
			<a href="/about" aria-current={url.pathname === "/about" ? "page" : false}
				>关于
			</a>
			<a href="/posts" aria-current={url.pathname === "/posts" ? "page" : false}
				>博客
			</a>
		</nav>
	</span>
	<ThemeToggle />
	<button
		id="toggle-navigation-menu"
		type="button"
		aria-label="primary navigation"
		aria-expanded="false"
	>
		<svg
			fill="currentColor"
			viewBox="0 0 20 20"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				fill-rule="evenodd"
				d="M3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
				clip-rule="evenodd"></path>
		</svg>
	</button>
</header>

<style>
	header {
		@apply relative z-50 mb-28 flex items-center sm:pl-[4.5rem];

		.logo {
			@apply inline-flex items-center grayscale hover:filter-none sm:relative sm:inline-block;

			svg {
				@apply mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12;
			}

			> span {
				@apply text-xl font-bold sm:text-2xl;
			}
		}

		#toggle-navigation-menu {
			@apply ml-8 sm:invisible sm:hidden;

			svg {
				@apply h-6 w-6;
			}
		}

		nav {
			@apply mt-1 -ml-4 hidden text-accent sm:flex sm:divide-x sm:divide-dashed sm:divide-accent;

			a {
				@apply px-4 sm:hover:underline;
			}
		}

		@media (max-width: 640px) {
			:global(body.menu-open) & {
				@apply relative z-50;

				nav {
					@apply absolute -inset-x-4 top-14 m-0 flex flex-col items-end gap-y-4 rounded-md bg-[color:var(--theme-menu-bg)] py-4 shadow backdrop-blur backdrop-filter;

					a {
						@apply p-4;
					}
				}
			}
		}
	}
</style>
